<template>
	<div class="barEcharts">
		<EchartsBarLeft class="demo"></EchartsBarLeft>
		<EchartsBarRight class="demo"></EchartsBarRight>
	</div>
	<div>
		<EchartsMap></EchartsMap>
	</div>
	<div class="barEcharts">
		<EchartsLineLeft class="demo"></EchartsLineLeft>
		<EchartsLineRight class="demo"></EchartsLineRight>
	</div>
</template>

<script setup lang="ts" name="baseEcharts">
import EchartsMap from '../components/echarts-map.vue'
import EchartsBarLeft from '../components/echarts-bar-left.vue'
import EchartsBarRight from '../components/echarts-bar-right.vue'
import EchartsLineLeft from '../components/echarts-line-left.vue'
import EchartsLineRight from '../components/echarts-line-right.vue'
</script>

<style scoped>
.barEcharts {
	display: flex;
	justify-content: space-around;
	margin: 20px;
}
.demo{
	flex:4;
}

</style>